<template>
  <div class="leave">
    <el-container>
      <el-header>
        <span>请假申请</span>
        <el-icon><StarFilled /></el-icon>
        <el-icon><SetUp /></el-icon>
        <el-icon><MoreFilled /></el-icon>
      </el-header>
      <el-main>
        <!-- 操作按钮 -->
        <div class="button">
          <el-button type="warning" @click="showDialog">发起新的</el-button>

          <!-- action 指定上传地址 -->
          <!-- headers 指定上传请求的请求头参数 -->
          <!-- name 指定上传字段名 -->
          <!-- data 上传时附带的额外参数 -->
          <!-- show-file-list 是否显示上传文件列表 -->
          <!-- disabled 是否禁用上传组件 -->
          <!-- accept 接受上传的文件类型,多个文件类型用分号分割 -->
          <!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用-->
          <!-- on-success 文件上传成功时的钩子 -->
          <!-- on-error 文件上传失败时的钩子 -->
          <el-upload
            class="daoru"
            action="/api/leave/import"
            :headers="headers"
            name="excel"
            :data="{ userid: formData.userid }"
            :on-change="onChange"
            :on-success="onSuccess"
            :on-error="onError"
            :show-file-list="false"
            :disabled="uploading"
            accept="xlsx;slx"
          > 
            <el-button  :loading="uploading">导入</el-button>
          </el-upload>
          <!-- 导出的思路
          1、点击导出按钮，向服务器发送请求，服务端返回数据到前端，前端保存数据到Excel文件、PDF文件等（file-saver js库）
          2、点击导出按钮，向服务端发送请求，服务端处理数据并生成文件，返回文件到前端
           -->
          <el-button class="daochu" >
            <el-link :href="'/api/leave/download?userid='+formData.userid" target="_blank">导出</el-link>
          </el-button>
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="待办事项" name="1"></el-tab-pane>
            <el-tab-pane label="已办事项" name="2"></el-tab-pane>
            <el-tab-pane label="抄送事项" name="3"></el-tab-pane>
            <el-tab-pane label="我发起的" name="4"></el-tab-pane>
            <el-tab-pane label="全部数据" name="5"></el-tab-pane>
            <el-tab-pane label="概览" name="6"></el-tab-pane>
            <el-tab-pane label="统计报表" name="7"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="_id"
            label="编号"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            prop="status"
            label="当前流程"
            width="120"
            :formatter="formatterStatus"
          />
          <el-table-column prop="name" label="申请人" width="120" />
          <el-table-column prop="reason" label="请假事由" width="200" />
          <el-table-column
            prop="starttime"
            label="开始日期"
            width="150"
            :formatter="formatterTime"
          />
          <el-table-column
            prop="endtime"
            label="结束日期"
            width="120"
            :formatter="formatterTime"
          />
          <el-table-column prop="days" label="请假总天数" width="120" />
          <el-table-column
            prop="time"
            label="申请时间"
            width="120"
            :formatter="formatterTime"
          />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="editRow(scope)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
        <!-- 弹出抽屉 -->
        <el-drawer
          ref="drawerRef"
          v-model="addDialog"
          title="出差申请"
          direction="rtl"
          custom-class="demo-drawer"
        >
          <div class="demo-drawer__content">
            <!-- 新增表单 -->
            <el-form
              :model="formData"
              label-position="top"
              :rules="rules"
              ref="formRef"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="申请人" prop="name">
                    <el-input v-model="formData.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在部门">
                    <el-input v-model="formData.dept" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="请假事由" prop="reason">
                    <el-input
                      type="textarea"
                      v-model="formData.reason"
                      placeholder="输入内容"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="事由说明" prop="reason">
                    <el-input
                      type="textarea"
                      v-model="formData.reason"
                      placeholder="请输入内容"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开始日期" prop="starttime">
                    <el-date-picker
                      v-model="formData.starttime"
                      type="date"
                      placeholder="请选择日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束日期" prop="endtime">
                    <el-date-picker
                      v-model="formData.endtime"
                      type="date"
                      placeholder="请选择日期"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="请假总天数" prop="days">
                    <el-input v-model="formData.days" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div class="demo-drawer__footer">
              <el-button @click="addDialog = false">暂存</el-button>
              <el-button type="primary" @click="onSubmit(formRef)"
                >提交申请</el-button
              >
            </div>
          </div>
        </el-drawer>
      </el-main>
    </el-container>
  </div>
</template>
 
<script setup>
import { ref, onMounted, reactive } from "vue";
import { leave_list, leave_add, leave_delete } from "../../api/index";
import { ElNotification } from "element-plus";

var headers = ref({Authorization:'Bearer'+' '+localStorage.getItem('token') })
var activeName = ref("");
var tableData = ref([]);
var total = ref(0);
var addDialog = ref(false);
var formData = ref({
  userid: JSON.parse(localStorage.getItem("userinfo"))._id,
  name: JSON.parse(localStorage.getItem("userinfo")).name,
  reason: "",
  starttime: "",
  endtime: "",
  days: "",
});
var formRef = ref();
var uploading = ref(false)

// 验证  申请人
const validateName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入申请人"));
  } else {
    callback();
  }
};

// 验证  出发日期
const validateStarttime = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请选择一个出发日期"));
  } else {
    // 判断出发日期和结束日期的早晚
    if (
      new Date(formData.value.starttime) - new Date(formData.value.endtime) >
      0
    ) {
      formData.value.starttime = "";
      formData.value.days = "";
      callback(new Error("出发日期必须早于结束日期"));
    }
    // 如果出发日期和结束日期都存在，那么计算出请假总天数
    else if (formData.value.starttime && formData.value.endtime) {
      formData.value.days =
        (new Date(formData.value.endtime) -
          new Date(formData.value.starttime)) /
        (24 * 60 * 60 * 1000); //（结束日期-出发日期）/一天的毫秒数=出差天数
    }
    callback();
  }
};
// 验证  结束日期
const validateEndtime = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请选择一个返回日期"));
  } else {
    if (
      new Date(formData.value.starttime) - new Date(formData.value.endtime) >
      0
    ) {
      //返回日期必须大于出发日期
      formData.value.endtime = "";
      formData.value.days = "";
      callback(new Error("返回日期必须大于出发日期!"));
    } else if (formData.value.starttime && formData.value.endtime) {
      //出发日期,返回日期都存在, 计算总天数
      formData.value.days =
        (new Date(formData.value.endtime) -
          new Date(formData.value.starttime)) /
        (24 * 60 * 60 * 1000);
    }
    callback();
  }
};
// 验证  出差理由
const validateReason = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入出差理由"));
  } else {
    callback();
  }
};
// 验证  总出差时间
const validateDays = (rule, value, callback) => {
  if (value === " " || Number(value) == 0) {
    callback(new Error("请填写正确的总天数"));
  } else {
    callback();
  }
};
// 表单的验证规则
const rules = reactive({
  name: [{ validator: validateName, trigger: "blur", required: true }],
  reason: [{ validator: validateReason, trigger: "blur", required: true }],
  starttime: [
    { validator: validateStarttime, trigger: "blur", required: true },
  ],
  endtime: [{ validator: validateEndtime, trigger: "blur", required: true }],
  days: [{ validator: validateDays, trigger: "blur", required: true }],
});

// 发送 出差申请列表 获取请求
onMounted(async () => {
  var userinfo = JSON.parse(localStorage.getItem("userinfo"));
  var res = await leave_list({ userid: userinfo._id, page: 1 });
  console.log(res.data);
  tableData.value = res.data.list;
  total.value = res.data.total;
});

// 点击发起新的，弹出抽屉，重置表单
var showDialog = () => {
  addDialog.value = true; //弹出抽屉
  formRef.value.resetFields(); //重置表单
  formData.value = {
    userid: JSON.parse(localStorage.getItem("userinfo"))._id,
    name: JSON.parse(localStorage.getItem("userinfo")).name,
    reason: "",
    starttime: "",
    endtime: "",
    days: "",
  };
  delete formData.value._id; //删除_id 属性
};

// 提交表单，发送 添加请求
var onSubmit = (formRef) => {
  formRef.validate(async (valid) => {
    if (valid) {
      // 需要先判断提交表单时的动作是”新增“还是”编辑“，根据formData中是否具有_id属性来判断
      if (formData.value._id) {
        // 发起编辑请求
        ElNotification({
          //弹出编辑通知
          title: "编辑通知",
          message: "编辑成功!",
          type: "success",
        });
        addDialog.value = false; //关闭抽屉
      } else {
        //发请求, 新增出差申请
        var res = await leave_add(formData.value);
        if (res.data.code == 200) {
          //如果服务端返回 200, 表示新增成功
          ElNotification({
            //弹出通知
            title: "新增通知",
            message: res.data.msg,
            type: "success",
          });
          addDialog.value = false; //关闭抽屉
          tableData.value = res.data.list; //保存数据列表
          total.value = res.data.total; //保存数据列表总数
          formRef.resetFields(); //重置表单
        } else {
          ElNotification({
            title: "新增通知",
            message: res.data.msg,
            type: "error",
          });
        }
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// 添加文件、上传成功和上传失败时的回调
var onChange =(uploadFile, uploadFiles) =>{
  if(uploadFile.percentage<100){
    uploading.value = true;//显示loading
  }
}

// 文件上传成功时的回调
var onSuccess=(response, uploadFile, uploadFiles)=>{
  uploading.value = false//隐藏loading
  if(response.code == 200){
    ElNotification({ //弹出通知
      title: '导入通知',
      message: response.msg,
      type: 'success',
    })
  }
}

// 文件上传失败时的回调
var onError=(error, uploadFile, uploadFiles)=>{
  uploading.value = false//隐藏loading
  if(error){
    ElNotification({ //弹出通知
      title: '导入通知',
      message: '导入失败',
      type: 'error',
    })
  }
}

var handleClick = (name) => {
  console.log(activeName.value, name);
};

// 格式化审核状态
var formatterStatus = function (row, column, cellValue, index) {
  // console.log(cellValue);
  return cellValue == 0 ? "审核中" : "已通过";
};

// 格式化日期
var formatterTime = function (row, column, cellValue, index) {
  var d = new Date(cellValue);
  return `${d.getFullYear()}-${addZero(d.getMonth() + 1)}-${addZero(
    d.getDate()
  )}`;
};

// 日期补零函数
var addZero = (num) => {
  return num < 10 ? "0" + num : num;
};

// 分页处理
var handleCurrentChange = async (page) => {
  // 请求page对应页码的数据
  var userinfo = JSON.parse(localStorage.getItem("userinfo"));
  var res = await leave_list({ userid: userinfo._id, page });
  console.log(res.data);
  tableData.value = res.data.list;
  total.value = res.data.total;
};

// 编辑事件处理
var editRow = async (scope) => {
  // 弹出抽屉
  addDialog.value = true; //弹出抽屉
  // 让点击的当前行的数据 回显
  formData.value = JSON.parse(JSON.stringify(scope.row)); //利用JSON.parse( JSON.stringify（））将数据做一个深拷贝之后再赋值，避免改动时互相影响
};

// 删除事件处理
var deleteRow = async (scope) => {
  var userinfo = JSON.parse(localStorage.getItem("userinfo"));
  var res = await leave_delete({
    userid: userinfo._id,
    id: scope.row._id,
    page: 1,
  });
  // console.log(scope);
  if (res.data.code == 200) {
    ElNotification({
      //弹出通知
      title: "删除通知",
      message: res.data.msg,
      type: "success",
    });
    tableData.value = res.data.list;
    total.value = res.data.total;
  }
};
</script>

<style scoped>
.leave {
  width: 100%;
}
.el-header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #ccc;
}
.el-header :nth-child(1) {
  font-size: 20px;
  font-weight: 700;
}
.el-header :nth-child(2) {
  margin: 0 10px;
  color: orange;
  font-size: 20px;
}
.el-header :nth-child(3) {
  margin: 0 10px;
  font-size: 20px;
  color: gray;
}
.el-header :nth-child(4) {
  margin: 0 10px;
  font-size: 20px;
  color: gray;
}
.el-main {
  padding: 0;
}
.button {
  width: 100%;
  display: flex;
  border-bottom: 3px solid #ccc;
  align-items: center;
  padding-left: 10px;
}
.demo-tabs {
  margin-left: 30px;
}
.el-tabs__nav-wrap::after {
  background-color: transparent;
}
.pagination {
  margin: 20px 40%;
}
.daoru{
  margin-left: 10px;
}
.daochu{
  margin-left: 10px;
}
</style>